<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>穿越火线周边商城</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<style type="text/css">
			.slideshow{
				width: 100%;
				height: 522px;
				margin-top:158px ;
			}
			#mlBox {
				width: 100%;
				height: 522px;
				position: relative;
				margin: auto;
				/* border: 1px #ececec solid; */
			}

			#mlImg {
				width: 100%;
				height: 300px;
			}

			#mlImg img {
				width: 100%;
				height: 522px;
				display: none;
			}

			#mlSpan {
				width: 120px;
				height: 15px;
				position: relative;
				bottom: 20px;
				left: 50%;
				margin: 0;
				top: 176px;

			}

			#mlSpan span {
				display: block;
				float: left;
				width: 26px;
				height: 4px;
				background: #ffc933;

				margin: 2px;
				z-index: 100;
			}

			#mlImg #mlShow {
				display: block;
			}

			#mlSpan #mlOn {
				background: chartreuse;
			}

			#mlLeft {
				width: 30px;
				height: 30px;
				position: absolute;
				left: 0;
				top: 50%;
				display: none;
				line-height: 30px;
				font-size: 22px;
			}

			#mlRight {
				width: 30px;
				height: 30px;
				position: absolute;
				right: 0;
				top: 50%;
				display: none;
				line-height: 30px;
				font-size: 22px;
			}
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<div id="header-html"></div>
		<!-- 轮播图 -->
		<div class="slideshow">
			<div id="mlBox">
			<div id="mlImg">
				<a href=""><img src="img/首页-穿越火线周边商城/20210423113404_255097.jpg" alt="" id="mlShow"></a>
				<a href=""><img src="img/首页-穿越火线周边商城/20210120111651_488869.jpg" alt=""></a>
				<a href=""><img src="img/首页-穿越火线周边商城/20210618153906_590633.jpg" alt=""></a>
				<a href=""><img src="img/首页-穿越火线周边商城/20201020155225_585524.jpg" alt=""></a>
			</div>
			<p id="mlSpan">
				<span id="mlOn"></span>
				<span></span>
				<span></span>
				<span></span>

			</p>
		</div>
		
		
		</div>
		<!-- 内容版心 -->
		<content>
			<div class="content-model">
				<div class="content-img">
					<div class="content-box">
						<h3>模型手办</h3>
						<span>品质重现，限量发售</span>
						<a href=""><span>更多</span><i></i></a>
					</div>
					<div class="content-box1">
						<a href=""><img src="./img/首页-穿越火线周边商城/20200807154340_905132.jpg"></a>
					</div>
					<div class="content-box3">
						<ul id="hot-box"></ul>
					</div>
				</div>
				<div class="content-num">
					<div class="content-img">
						<div class="content-box">
							<h3>个性生活</h3>
							<span>购物好，秀个性</span>
							<a href=""><span>更多</span><i></i></a>
						</div>
						<div class="content-box1">
							<a href="details.html"><img src="img/首页-穿越火线周边商城/20210610143645_904121.jpg"></a>
						</div>
						<div class="content-box3">
							<ul>
								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20201117165528_935755.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>不倒杯</p>
											<p class="content-pri">￥89</p>
										</div>
									</a>
								</li>

								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20201207144957_184643.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>如锋双肩包】</p>
											<p class="content-pri">￥139</p>
										</div>
									</a>
								</li>
								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20210309150202_612177.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>屠龙毛绒挂件</p>
											<p class="content-pri">￥50</p>
										</div>
									</a>
								</li>
								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20201207110726_699961.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>防盗单肩包</p>
											<p class="content-pri">￥99</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="content-live">
					<div class="content-img">
						<div class="content-box">
							<h3>新颖数码</h3>
							<span>拥有你的专属游戏利器</span>
							<a href=""><span>更多</span><i></i></a>
						</div>
						<div class="content-box1">
							<a href=""><img src="img/首页-穿越火线周边商城/20200716173612_463098.jpg"></a>
						</div>
						<div class="content-box3">
							<ul>
								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20200521191841_521962.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>CF 生化来袭 圆盘打灰机【现货】</p>
											<p class="content-pri">￥139</p>
										</div>
									</a>
								</li>

								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20201110171954_211483.png" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>CF 生化来袭 磁吸数据线【现货】</p>
											<p class="content-pri">￥49.9</p>
										</div>
									</a>
								</li>
								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20200521192334_964469.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>CF 生化对决 鼠标垫-浴血刀锋【现货】</p>
											<p class="content-pri">￥39.9</p>
										</div>
									</a>
								</li>
								<li>
									<a href="details.html"><img src="img/首页-穿越火线周边商城/20210301181501_488827.jpg" width="280"
											height="268px">
										<div class="content-box3-1">
											<p>CF移动电源fire again</p>
											<p class="content-pri">￥160</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>

		</content>
	<!-- 底部 -->
	<div id="footer-html"></div>
		<!-- 侧边栏 -->
		<!-- <div class="sidebar">
			<a href="">
				<i></i>
				<span>我的<br>订单</span>
			</a>
			<a href="">
				<i class="address"></i>
				<span>我的<br>地址</span>
			</a>
			<a href="" class="mycart">
				<i class="cart"></i>
				<span>购<br>物<br>车</span>
				<i class="cartnum">0</i>
			</a>
			<a href="" class="myservice">
				<i class="service"></i>
				<span class="service_i">咨询</span>
			</a>
		</div>
	
		<div class="topnav" style="display: block;">
			<a href="">
				<i></i>
			</a>
		</div>
 -->
	
	</div>
	</body>
</html>
<script src="js/轮播图.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/header.js" type="text/javascript"></script>
<script type="text/javascript">
	$("#header-html").load("header.html");
	$("#footer-html").load("footer.html");
	function getHotGoods(){
		$.get("./php/getGoodsListNew.php?typeId=003&count=4",function(data){
			let goodsList = JSON.parse(data);
			let htmlStr="";
			goodsList.forEach(goods=>{
				htmlStr +=`
				<li onclick="location.href='details.html?goodsId=${goods.goodsId}'">
					<img src="${goods.goodsImg}" width="280"
							height="268px">
						<div class="content-box3-1">
							<p>${goods.goodsName}</p>
							<p class="content-pri">￥${goods.goodsPrice}</p>
						</div>
					
				</li>
				
				`
			});
			$("#hot-box").html(htmlStr);
		})
	}
	$(function(){
		getHotGoods();
	})
</script>
